<template>
	<view :class="['mask', show ? 'mask-active' : '']" @click="click" @touchmove.stop.prevent >
		<slot />
	</view>
</template>

<script>
	export default {
		props:{
			show: {
				type: Boolean,
				default: false
			}
		},
		data(){
			return {}
		},
		methods:{
			click(){ this.$emit('click') }
		}
	}
</script>

<style lang="scss" scoped>
	/** 遮罩层 从zIndex: -1; 到 zIndex > 0;  zIndex 取值要取大 */
	.mask{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0,0,0,.5);z-index: -1;opacity: 0;transition: all .3s;display: flex;align-items: center;justify-content: center;
		&-active{opacity: 1;z-index: 10070;}
	}
</style>
